import React from 'react';

import styles from './SearchPanel.less';
import PropTypes from 'prop-types';
import { Select, Input, Button } from 'antd';
import { FormattedMessage } from 'umi/locale';

const { Option } = Select;


const SearchPanel = props => {
  const { onInputSearch, onSearchBtnClick, onInputChange, onSelectChange, onOpenModal, inputValue, selectValue, loading } = props
  return (
    <div className={ styles.container }>
      <Button type="primary" icon="plus" onClick={ () => onOpenModal(null) }><FormattedMessage id={'add'}/></Button>
      <Select value={ selectValue } style={ { width: 120 } } onChange={ onSelectChange } loading={ loading }>
        <Option value={ 0 }>全部</Option>
        <Option value={ 1 }>名字</Option>
        <Option value={ 2 }>备注</Option>
      </Select>
      <Input disabled={ loading } placeholder="输入关键词..." value={ inputValue } onChange={ onInputChange }
             onPressEnter={ onInputSearch }/>
      <Button loading={ loading } onClick={ onSearchBtnClick }>搜索</Button>
    </div>
  );
};

SearchPanel.propTypes = {
  onOpenModal: PropTypes.func.isRequired,
  onInputSearch: PropTypes.func.isRequired,
  onSelectChange: PropTypes.func.isRequired,
  onSearchBtnClick: PropTypes.func.isRequired,
  onInputChange: PropTypes.func.isRequired,
  loading: PropTypes.bool.isRequired,
  inputValue: PropTypes.string.isRequired,
  selectValue: PropTypes.number.isRequired
};

export default SearchPanel;
